<template>
  <el-card>
    <div class="block">
      <span class="demonstration">时间范围</span>
      <el-date-picker
        v-model="shechForm.date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary">查询</el-button>
    </div>
    <div class="content">
      <div style="width: 80%; height: 350px;" ref="box"></div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
import { dashlist } from '../../api/dash.js'
import moment from 'moment'
export default {
  data() {
    return {
      shechForm: {
        date: []
      },
      steus: {}
    }
  },
  mounted() {
    this.getdata()
  },
  methods: {
    getline() {
      var myChart = echarts.init(this.$refs.box)
      var option = {
        title: {
          text: '堆叠区域图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['销售额']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '销售额',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: []
          }
        ]
      }
      option.xAxis[0].data = Object.keys(this.steus)
      option.series[0].data = Object.values(this.steus)
      // console.log(option)
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    async getdata() {
      const { data } = await dashlist({
        date: JSON.stringify(this.shechForm.date)
      })
      const obj = {}
      data.forEach(item => {
        item.orderTime = moment(item.orderTime).format('MM-DD')
        if (obj[item.orderTime]) {
          obj[item.orderTime] = obj[item.orderTime] + item.orderAmount
        } else {
          obj[item.orderTime] = item.orderAmount
        }
      })
      this.steus = obj
      this.getline()
    }
  }
}
</script>

<style lang="less" scoped>
.block {
  .el-button {
    margin-left: 10px;
  }
  .demonstration {
    margin-right: 5px;
  }
}
.content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 20px 10px;
}
</style>
